<template>
  <view class="function-list">
    <view 
      v-for="func in functions" 
      :key="func.id" 
      class="function-item"
      hover-class="item-hover"
      @click="$emit('select', func)"
    >
      <view class="function-icon">
        <uni-icons :type="func.icon" size="20" color="#00ffff"></uni-icons>
      </view>
      
      <view class="function-info">
        <text class="function-title">{{ func.title }}</text>
      </view>
      
      <view class="function-right">
        <view v-if="func.badge" class="function-badge">{{ func.badge }}</view>
        <uni-icons type="right" size="16" color="rgba(255, 255, 255, 0.5)"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  functions: {
    type: Array,
    default: () => []
  }
});

defineEmits(['select']);
</script>

<style>
.function-list {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.function-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 0, 255, 0.2);
}

.function-item:last-child {
  border-bottom: none;
}

.item-hover {
  background-color: rgba(255, 0, 255, 0.1);
}

.function-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.function-info {
  flex: 1;
}

.function-title {
  font-size: 16px;
  color: #fff;
}

.function-right {
  display: flex;
  align-items: center;
}

.function-badge {
  background-color: #ff00ff;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 10px;
}
</style>
